import 'package:flutter/material.dart';
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
import './widget/help_center_item_view.dart';
import 'package:flutter_smart_heating/ui/ui.dart';
import 'package:get/get.dart';

import 'logic.dart';
import 'state.dart';

class SupportPage extends StatelessWidget {
  final SupportLogic logic = Get.put(SupportLogic());
  final SupportState state = Get.find<SupportLogic>().state;

  SupportPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: UiTheme.of(context).match(light: Colors.white),
        title: Text('常见问题'.tr),
        actions: const [
          UiRightMenuButtonGroup(),
        ],
      ),
      body: KeyboardDismissOnTap(
        child: UiState(
          controller: state.uiStateController,
          preview: previewView(),
          onLoad: logic.fetchCate,
          child: Column(
            children: [
              Container(
                color: UiTheme.of(context).match(
                  light: Colors.white,
                  dark: Theme.of(context).appBarTheme.backgroundColor,
                ),
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    horizontal: UiTheme.spacingXX,
                    vertical: UiTheme.toolbarSpacing,
                  ),
                  child: UiSearchBar(
                    render: true,
                    backgroundColor:
                        UiTheme.of(context).match(light: Colors.grey[100]),
                    controller: state.searchBarController,
                    onSubmitted: (value) {
                      logic.search(value);
                    },
                    onClear: () {
                      state.keyword = '';
                      logic.fetchList();
                    },
                  ),
                ),
              ),
              Container(
                color: UiTheme(context).panelBackground,
                height: 50,
                child: GetBuilder<SupportLogic>(
                  id: 'category',
                  builder: (_) {
                    return state.category.isEmpty
                        ? Container()
                        : TabBar(
                            labelColor: UiTheme.primary,
                            isScrollable: state.category.length > 4,
                            padding: EdgeInsets.zero,
                            dividerColor: Colors.transparent,
                            labelPadding: const EdgeInsets.symmetric(
                              horizontal: 8,
                            ),
                            indicator: const UiRoundUnderlineTabIndicator(
                              lineWidth: 30,
                              borderSide: BorderSide(
                                color: UiTheme.primary,
                                width: 3,
                              ),
                            ),
                            unselectedLabelStyle: const TextStyle(
                              fontWeight: FontWeight.normal,
                            ),
                            labelStyle: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: UiTheme.fontSize.tabbarFontSize,
                            ),
                            controller: state.tabController,
                            tabs: state.category
                                .map((e) => Tab(
                                      text: e['name'],
                                    ))
                                .toList(),
                            onTap: (value) {
                              logic.onTabsClick(value);
                            },
                          );
                  },
                ),
              ),
              const Divider(height: 0),
              GetBuilder<SupportLogic>(
                id: 'questions',
                builder: (context) {
                  return Expanded(
                    child: state.loading
                        ? const UiLoading()
                        : state.questions.isEmpty
                            ? const UiResult(
                                text: '暂无相关问题',
                              )
                            : ListView.builder(
                                itemCount: state.questions.length,
                                itemBuilder: (context, index) {
                                  var item = state.questions[index];
                                  return HelpCenterItemView(item: item);
                                },
                              ),
                  );
                },
              )
            ],
          ),
        ),
      ),
    );
  }

  Widget previewView() {
    return Column(
      children: [
        Container(
          height: 40,
          margin: const EdgeInsets.symmetric(
              horizontal: UiTheme.spacingXX, vertical: UiTheme.toolbarSpacing),
          decoration: BoxDecoration(
            color: Colors.grey.withOpacity(0.2),
            borderRadius: BorderRadius.circular(UiTheme.boxRadiusX),
          ),
        ),
        const SizedBox(height: 8),
        const Divider(height: 0),
        SizedBox(
          height: 50,
          child: Row(
            children: List.generate(
              4,
              (index) => Expanded(
                child: Container(
                  height: 20,
                  margin: const EdgeInsets.symmetric(horizontal: 20),
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(
                      UiTheme.boxRadius,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        const Divider(height: 0),
        const Expanded(
          child: Center(
            child: UiLoading(),
          ),
        )
      ],
    );
  }
}
